<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">

    <title>Tienda</title>

    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/img/logo/favicon.ico"
          type="image/x-icon"/>

    <!--== Google Fonts ==-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">

    <!--=== Bootstrap CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!--=== Font-Awesome CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/font-awesome.css" rel="stylesheet">
    <!--=== Plugins CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/plugins.css?v=1." rel="stylesheet">
    <!--=== Helper CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/helper.min.css" rel="stylesheet">
    <!--=== Main Style CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/style.css?v=1." rel="stylesheet">

    <!-- Modernizer JS -->
    <script src="${pageContext.request.contextPath}/static/js/vendor/modernizr-2.8.3.min.js"></script>


    <!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<%--header--%>
<jsp:include page="head.jsp"/>
<!--== 轮播图  ==-->
<div class="slider-area-wrap">
    <div class="home-slider-carousel owl-carousel">
        <div class="single-slide-item">  <!-- 图片在这里面   style.css -->
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="slider-text">
                            <h2>Canvas Gear</h2>
                            <h3>With Dual Front Camera</h3>
                            <h4>Can Smooth Beautiful Images</h4>
                            <a href="javascript:;" onclick="NoDo()" class="btn">现在就买</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="single-slide-item slide-item_2">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="slider-text">
                            <h2>Ajaira Mobile</h2>
                            <h3>With Dollbee Speaker</h3>
                            <h4>Can Smooth Sound</h4>
                            <a href="javascript:;" onclick="NoDo()" class="btn">现在就买</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="single-slide-item slide-item_3">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="slider-text">
                            <h2>HasMobile</h2>
                            <h3>With Dual Front Camera</h3>
                            <h4>Can Smooth Beautiful Images</h4>
                            <a href="javascript:;" onclick="NoDo()" class="btn">现在就买</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--== End Slider Area ==-->
<!--==三包的什么鬼 ==-->
<section id="call-to-action">
    <div class="container">
        <div class="call-to-action-content">
            <div class="row">
                <!-- Single Call to Action Start -->
                <div class="col-lg-3 col-sm-6 m-auto">
                    <div class="single-action-item d-flex align-items-center">
                        <div class="call-action-icon">
                            <i class="fa fa-truck"></i>
                        </div>
                        <div class="call-action-info">
                            <h4>免运费</h4>
                            <p>on order over $100</p>
                        </div>
                    </div>
                </div>
                <!-- Single Call to Action End -->
                <!-- Single Call to Action Start -->
                <div class="col-lg-3 col-sm-6">
                    <div class="single-action-item d-flex align-items-center">
                        <div class="call-action-icon">
                            <i class="fa fa-support"></i>
                        </div>
                        <div class="call-action-info">
                            <h4>全天支持</h4>
                            <p>Online consultations</p>
                        </div>
                    </div>
                </div>
                <!-- Single Call to Action End -->
                <!-- Single Call to Action Start -->
                <div class="col-lg-3 col-sm-6">
                    <div class="single-action-item d-flex align-items-center">
                        <div class="call-action-icon">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <div class="call-action-info">
                            <h4>每日更新</h4>
                            <p>Check out store</p>
                        </div>
                    </div>
                </div>
                <!-- Single Call to Action End -->
                <!-- Single Call to Action Start -->
                <div class="col-lg-3 col-sm-6">
                    <div class="single-action-item d-flex align-items-center">
                        <div class="call-action-icon">
                            <i class="fa fa-refresh"></i>
                        </div>
                        <div class="call-action-info">
                            <h4>30天包退</h4>
                            <p>oneyback guarantee</p>
                        </div>
                    </div>
                </div>
                <!-- Single Call to Action End -->
            </div>
        </div>
    </div>
</section>
<!--== End Call To Action ==-->
<!--== 产品板块1  -->
<div id="product-area-wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="product-content-wrap">
                    <!-- Product Tab Menu Start -->
                    <nav class="product-teb-menu">
                        <ul class="nav justify-content-center" role="tablist">
                            <li>
                                <a class="active" href="#new-products" id="new-product-tab" data-toggle="tab">最新产品</a>
                            </li>
                            <li>
                                <a href="#feature-products" id="feature-product-tab" data-toggle="tab">热门产品</a>
                            </li>
                        </ul>
                    </nav>
                    <!-- Product Tab Menu End -->
                    <div class="tab-content" id="productContent">
                        <!-- 最新产品 -->
                        <div class="tab-pane fade show active" id="new-products" role="tabpanel">
                            <div class="products-wrapper">
                                <div class="product-carousel owl-carousel">
                                    <c:forEach items="${news}" var="item">
                                        <!-- 基本一样 -->
                                        <div class="single-product-item">
                                            <figure class="product-thumb">
                                                <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">
                                                    <img class="FixHw" src="${pageContext.request.contextPath}/${item.imgs}"
                                                         alt="Product"></a>
                                                <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}"
                                                   class="btn btn-round btn-cart" title="Quick View"><i
                                                        style="display: inline-block;line-height: 40px;"
                                                        class="fa fa-eye"></i></a>
                                            </figure>
                                            <div class="product-details">
                                                <h2 class="product-title"><a
                                                        href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">${fn:substring(item.name,0 ,12 )}...</a>
                                                </h2>
                                                <span class="product-price">$${item.shelfPrice}</span>

                                                <div class="product-meta">
                                                    <a href="javascript:;" onclick="addcart('${item.pid}')"
                                                       class="btn btn-round btn-cart addcar"
                                                       title="Add to Cart"><i
                                                            class="fa fa-shopping-cart"></i></a>
                                                        <%--<a href="wishlist.html" onclick="NoDo()" class="btn btn-round btn-cart "--%>
                                                        <%--title="Add to Wishlist"><i class="fa fa-heart"></i></a>--%>
                                                        <%--<a href="compare.html" class="btn btn-round btn-cart"--%>
                                                    <!--  -->
                                                        <%--title="Add to Compare"><i class="fa fa-exchange"></i></a>--%>
                                                </div>
                                            </div>
                                        </div>

                                    </c:forEach>
                                </div>
                            </div>
                        </div>

                        <!-- 热门产品 -->
                        <div class="tab-pane fade" id="feature-products" role="tabpanel">
                            <div class="products-wrapper">
                                <div class="product-carousel owl-carousel">
                                    <c:forEach items="${hots}" var="item">
                                        <!-- Single Product Start -->
                                        <div class="single-product-item">
                                            <figure class="product-thumb">
                                                <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">
                                                    <img class="FixHw" src="${pageContext.request.contextPath}/${item.imgs}"
                                                         alt="Product"></a>
                                                <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}"
                                                   class="btn btn-round btn-cart" title="Quick View"><i
                                                        class="fa fa-eye"></i></a>
                                            </figure>
                                            <div class="product-details">
                                                <h2 class="product-title">
                                                    <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">${item.name}</a>
                                                </h2>
                                                <div class="rating">
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                </div>
                                                <div class="price-box d-flex">
                                                    <span class="product-price">$${item.shelfPrice}</span>
                                                        <%--<del class="product-price sale">$${item.shopPrice}</del>--%>
                                                </div>

                                                <div class="product-meta">
                                                    <a href="javascript:;" onclick="addcart('${item.pid}')"
                                                       class="btn btn-round btn-cart addcar"
                                                       title="Add to Cart"><i
                                                            class="fa fa-shopping-cart"></i></a>
                                                    <%--<a href="wishlist.html" onclick="NoDo()" class="btn btn-round btn-cart "--%>
                                                       <%--title="Add to Wishlist"><i class="fa fa-heart"></i></a>--%>
                                                        <%--<a href="compare.html" class="btn btn-round btn-cart"--%>
                                                    <!--  -->
                                                        <%--title="Add to Compare"><i class="fa fa-exchange"></i></a>--%>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Single Product End -->
                                    </c:forEach>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Product Tab Content End -->
                </div>
            </div>
        </div>
    </div>
</div>
<!--== End Products  Area ==-->
<!-- 板块结束图片 -->
<div class="banner-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <a href="${pageContext.request.contextPath}/product/list.do">
                    <img src="${pageContext.request.contextPath}/static/img/banner/banner-home-one.jpg" alt="Banner"/>
                </a>
            </div>
        </div>
    </div>
</div>
<!-- End Sale Banner Area -->
<!-- 商品板块2   每个种类一个小版块 -->
<section id="productsby-category">
    <div class="container">
        <div class="productby-cate-content">
            <div class="row">
                <!-- 小版块1 -->
                <c:forEach items="${prePro}" var="pro">
                    <div class="col-lg-6">
                        <div class="category-product-wrap">
                            <h4 class="cate-pro-title"><a href="${pageContext.request.contextPath}/product/list.do?cid=${pro.cname.cid}">${pro.cname.cname}</a></h4>
                            <figure class="cat-banner">
                                <a href="${pageContext.request.contextPath}/product/list.do?cid=${pro.cname.cid}"><img
                                        src="${pageContext.request.contextPath}/static/img/images/cat-pro-${pro.cname.cid}.jpg"
                                        alt="Category"></a>
                            </figure>

                            <div class="products-wrapper">
                                <div class="cat-pro-carousel owl-carousel">
                                    <c:forEach items="${pro.products}" var="item">
                                        <!-- Single Product Start -->
                                        <div class="single-product-item">
                                            <figure class="product-thumb">
                                                <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">
                                                    <img class="FixHw" src="${pageContext.request.contextPath}/${item.imgs}"
                                                         alt="Product"></a>
                                                <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}"
                                                   class="btn btn-round btn-cart" title="Quick View"><i
                                                        class="fa fa-eye"></i></a>
                                            </figure>
                                            <div class="product-details">
                                                <h2 class="product-title">
                                                    <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">${item.name}</a>
                                                </h2>
                                                <div class="price-box d-flex">
                                                    <span class="product-price">$${item.shelfPrice}</span>
                                                        <%--<del class="product-price sale">$${item.shopPrice}</del>--%>
                                                </div>

                                                <div class="product-meta">
                                                    <a href="javascript:;" onclick="addcart('${item.pid}')"
                                                       class="btn btn-round btn-cart addcar"
                                                       title="Add to Cart"><i
                                                            class="fa fa-shopping-cart"></i></a>
                                                        <%--<a href="compare.html" class="btn btn-round btn-cart"--%>
                                                    <!--  -->
                                                        <%--title="Add to Compare"><i class="fa fa-exchange"></i></a>--%>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Single Product End -->
                                    </c:forEach>
                                </div>
                            </div>
                        </div>
                    </div>
                </c:forEach>
                <!-- Single Category Product End -->
            </div>
        </div>
    </div>
</section>
<!-- End Product By Category -->

<!-- 板块结束图片 -->
<%--这里用来加直播内容--%>
<!-- End Category Banner -->
<!--== 轮播商标  ==-->
<div class="brand-logo-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="brand-logo-carousel owl-carousel">
                    <!-- Single Brand Logo Start -->
                    <div class="single-brand-item">
                        <a href="#"><img src="${pageContext.request.contextPath}/static/img/logo/logo-1.png"
                                         alt="brand"></a>
                    </div>
                    <!-- Single Brand Logo End -->
                    <!-- Single Brand Logo Start -->
                    <div class="single-brand-item">
                        <a href="#"><img src="${pageContext.request.contextPath}/static/img/logo/logo-2.png"
                                         alt="brand"></a>
                    </div>
                    <!-- Single Brand Logo End -->
                    <!-- Single Brand Logo Start -->
                    <div class="single-brand-item">
                        <a href="#"><img src="${pageContext.request.contextPath}/static/img/logo/logo-3.png"
                                         alt="brand"></a>
                    </div>
                    <!-- Single Brand Logo End -->
                    <!-- Single Brand Logo Start -->
                    <div class="single-brand-item">
                        <a href="#"><img src="${pageContext.request.contextPath}/static/img/logo/logo-4.png"
                                         alt="brand"></a>
                    </div>
                    <!-- Single Brand Logo End -->
                    <!-- Single Brand Logo Start -->
                    <div class="single-brand-item">
                        <a href="#"><img src="${pageContext.request.contextPath}/static/img/logo/logo-5.png"
                                         alt="brand"></a>
                    </div>
                    <!-- Single Brand Logo End -->
                    <!-- Single Brand Logo Start -->
                    <div class="single-brand-item">
                        <a href="#"><img src="${pageContext.request.contextPath}/static/img/logo/logo-6.png"
                                         alt="brand"></a>
                    </div>
                    <!-- Single Brand Logo End -->
                </div>
            </div>
        </div>
    </div>
</div>
<!--== End Brand Carousel Area ==-->
<!--== 底部 ==-->
<jsp:include page="foot.jsp"/>
<!--== End Footer Area ==-->

<!-- 回到顶部 -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->

<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-3.3.1.min.js"></script>
<%--购物车飞入--%>
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery.fly.min.js"></script>
<!--=== Jquery Migrate Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-migrate-1.4.1.min.js"></script>
<!--=== Popper Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/popper.min.js"></script>
<!--=== Bootstrap Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/bootstrap.min.js"></script>
<!--=== Ajax Mail Js ===-->
<script src="${pageContext.request.contextPath}/static/js/ajax-mail.js"></script>
<!--=== Plugins Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/plugins.js"></script>
<!--=== product And store Js ===-->
<script src="${pageContext.request.contextPath}/static/js/product.js"></script>
<script src="${pageContext.request.contextPath}/static/js/api/store.js"></script>
<!--=== Active Js ===-->
<script src="${pageContext.request.contextPath}/static/js/active.js"></script>
</body>

<script>
    <%--window.onload = function (d) {--%>
        <%--$.ajax({--%>
            <%--url: '${pageContext.request.contextPath}/getCategory.do',--%>
            <%--type: "post",--%>
            <%--success: function (data) {--%>
                <%--var result = "";--%>
                <%--for (var i = 0; i < data.length; i++) {--%>
                    <%--result += "<li class='category-item-parent'><a href='${pageContext.request.contextPath}/product/list.do?cid=" + data[i].cid--%>
                        <%--+ "' class='category-item'><span>"+ data[i].cname +"</span></a></li>"--%>
                <%--}--%>
                <%--result += " <li class=\"category-item-parent\">\n" +--%>
                    <%--"                            <a href=\"#\" class=\"category-item btn-more\">More Categories</a>\n" +--%>
                    <%--"                        </li>";--%>

                <%--$("#cate").append(result);--%>
            <%--}--%>
        <%--})--%>
    <%--}--%>

    function NoDo() {
        alert("还没做");
    }
</script>
</html>
